<template>
  <view class="major-events-wrapper">
    <view class="major-events-header">
      <text class="major-events-title">工程大事件</text>
    </view>

    <view class="major-events-content" v-if="!loading && majorList.length > 0">
      <view class="timeline-container">
        <view class="year-section" v-for="year in yearRange" :key="year">
          <!-- 年份标题 -->
          <view class="year-header" @click="goToYearDetail(year)">
            <view class="year-dot"></view>
            <text class="year-text">{{ year }}</text>
          </view>

          <!-- 该年份的事件列表 -->
          <view class="events-list" v-if="getEventsByYear(year).length > 0">
            <view class="event-item" v-for="(item, index) in getEventsByYear(year)" :key="item.id">
              <view class="event-date">
                <text class="date-text">{{ formatDate(item.dateTime) }}</text>
              </view>
              <view class="event-content">
                <text class="event-title">{{ item.title }}</text>
                <text class="event-text" v-if="item.text">{{ item.text }}</text>
              </view>
            </view>
          </view>

          <!-- 该年份无事件 -->
          <view class="no-events" v-else>
            <text class="no-events-text">暂无事件</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-container" v-else-if="!loading && majorList.length === 0">
      <text class="empty-text">暂无大事件数据</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading-container" v-else>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script setup>
// 大事件页面逻辑
import { ref, computed, onMounted } from 'vue'
import { getListByLevel } from '@/api/majorEvent'

const majorList = ref([])
const loading = ref(true)

// 验证年份是否有效
const isValidYear = (year) => {
  return year && !isNaN(year) && year >= 1900 && year <= 2100
}

// 解析年份
const parseYear = (dateTime) => {
  if (!dateTime || typeof dateTime !== 'string') return null
  const yearStr = dateTime.split('-')[0]
  const year = parseInt(yearStr)
  return isValidYear(year) ? year : null
}

// 动态计算年份范围
const yearRange = computed(() => {
  if (majorList.value.length === 0) return []

  // 获取所有有效的年份
  const years = majorList.value.map((item) => parseYear(item.dateTime)).filter((year) => year !== null)

  if (years.length === 0) return []

  const minYear = Math.min(...years)
  const maxYear = Math.max(...years)

  // 生成从最小年份到最大年份的完整范围
  const range = []
  for (let year = minYear; year <= maxYear; year++) {
    range.push(year)
  }

  return range
})

// 验证日期字符串格式
const isValidDateString = (dateStr) => {
  if (!dateStr || typeof dateStr !== 'string') return false
  const parts = dateStr.split('-')
  return parts.length >= 3 && parts.every((part) => !isNaN(parseInt(part)))
}

// 创建安全的日期对象
const createSafeDate = (dateStr) => {
  if (!isValidDateString(dateStr)) return null
  const normalizedDate = dateStr.replace(/-/g, '/')
  const date = new Date(normalizedDate)
  return isNaN(date.getTime()) ? null : date
}

// 根据年份获取事件
const getEventsByYear = (year) => {
  return majorList.value
    .filter((item) => parseYear(item.dateTime) === year)
    .sort((a, b) => {
      // 同一年内按日期排序
      const dateA = createSafeDate(a.dateTime)
      const dateB = createSafeDate(b.dateTime)

      if (!dateA || !dateB) return 0
      return dateB - dateA
    })
}

// 验证月日是否有效
const isValidMonthDay = (month, day) => {
  const monthNum = parseInt(month)
  const dayNum = parseInt(day)
  return !isNaN(monthNum) && !isNaN(dayNum) && monthNum >= 1 && monthNum <= 12 && dayNum >= 1 && dayNum <= 31
}

// 格式化日期 - 只显示月日
const formatDate = (dateStr) => {
  if (!dateStr || typeof dateStr !== 'string') return ''

  const datePart = dateStr.split(' ')[0] // 取 "2021-08-18" 部分
  const parts = datePart.split('-')

  if (parts.length < 3) return ''

  const [year, month, day] = parts

  if (!isValidMonthDay(month, day)) return ''

  return `${month.padStart(2, '0')}.${day.padStart(2, '0')}`
}

// 获取大事件列表
const getMajorList = async () => {
  loading.value = true
  const res = await getListByLevel()
  if (res && res.code === 0 && res.data) {
    majorList.value = res.data
  }
  loading.value = false
}

// 跳转到年份详情页面
const goToYearDetail = (year) => {
  uni.navigateTo({
    url: `/pages/workbenches/majorEvents/yearDetail?year=${year}`
  })
}

onMounted(() => {
  getMajorList()
})
</script>

<style scoped>
.major-events-wrapper {
  padding: 20rpx;
  background-color: #f9f9f9;
  min-height: 100vh;
}

.major-events-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
  padding: 40rpx 0;
}

.major-events-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.major-events-content {
  padding: 0 20rpx;
}

.timeline-container {
  position: relative;
}

.year-section {
  margin-bottom: 80rpx;
  position: relative;
}

.year-header {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.year-header:hover {
  transform: translateX(10rpx);
}

.year-header:active {
  transform: scale(0.98);
}

.year-dot {
  width: 32rpx;
  height: 32rpx;
  background-color: #007aff;
  border-radius: 50%;
  border: 6rpx solid #fff;
  box-shadow: 0 0 0 3rpx #007aff;
  margin-right: 24rpx;
}

.year-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #007aff;
}

.events-list {
  margin-left: 56rpx;
  border-left: 2rpx solid #e5e5e5;
  padding-left: 40rpx;
  position: relative;
}

.event-item {
  display: flex;
  margin-bottom: 40rpx;
  position: relative;
  align-items: flex-start;
  width: 100%;
}

.event-item::before {
  content: '';
  position: absolute;
  left: -46rpx;
  top: 12rpx;
  width: 12rpx;
  height: 12rpx;
  background-color: #ccc;
  border-radius: 50%;
  border: 2rpx solid #fff;
}

.event-date {
  width: 120rpx;
  flex-shrink: 0;
  margin-right: 20rpx;
}

.date-text {
  font-size: 24rpx;
  color: #666;
  font-weight: 500;
}

.event-content {
  flex: 1;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  border-left: 4rpx solid #007aff;
  min-width: 0;
  overflow: hidden;
}

.event-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 12rpx;
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.event-text {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  display: block;
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.no-events {
  margin-left: 56rpx;
  padding: 40rpx 20rpx;
  text-align: center;
}

.no-events-text {
  font-size: 24rpx;
  color: #999;
}

.loading-container,
.empty-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.loading-text,
.empty-text {
  font-size: 28rpx;
  color: #999;
  text-align: center;
}

/* 响应式适配 */
@media screen and (max-width: 750rpx) {
  .year-text {
    font-size: 32rpx;
  }

  .event-content {
    padding: 16rpx;
  }

  .event-title {
    font-size: 26rpx;
  }

  .event-text {
    font-size: 22rpx;
  }

  .date-text {
    font-size: 22rpx;
  }
}
</style>
